<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
            >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >
                导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
        >
            <el-table-column type="index" width="55" label="#" align="center" />
            <el-table-column label="头像" align="center" prop="headimgUrl" width="80">
                <template slot-scope="scope">
                    <el-image
                        :src="preFix + scope.row.headimgUrl"
                        :preview-src-list="[preFix + scope.row.headimgUrl]"
                        fit="cover"
                    >
                        <div slot="placeholder" class="image-slot">
                        加载中...
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="昵称" align="center" prop="nickName" />
            <el-table-column label="朋友圈图片" align="center" prop="img" width="80">
                <template slot-scope="scope">
                    <el-image
                        :src="preFix + scope.row.img"
                        class="story-image"
                        :preview-src-list="[preFix + scope.row.img]"
                        fit="cover"
                    >
                        <div slot="placeholder" class="image-slot">
                        加载中...
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="内容" align="center" prop="content" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div v-html="scope.row.content"></div>
                </template>
            </el-table-column>
            <el-table-column label="阅读量" align="center" prop="readingVolume" />
            <el-table-column label="点赞量" align="center" prop="thumbsUp" />
            
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />

      
         
    </div>
</template>

<script>

import {  listBoard } from "@/api/interact"; 

export default {
    name: "heartbeatBillboard",// 心动告示牌
    dicts: ['activity_theme'],

    components: {
       
    },
    data() {
        return {
            // 搜索框配置
            searchData: [
                { type: "input", name: "昵称:", key: "nickName", placeholder: "请输入昵称" },
                { type: "input", name: "活动标题:", key: "subject", placeholder: "请输入活动标题" },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 弹出层标题
            // 是否显示弹出层
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            preFix: process.env.VUE_APP_BASE_API,

        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 字典翻译
        dictFormat(value, column) {
            return this.selectDictLabel(this.dict.type.activity_theme, value)
        },
        // 搜索框事件 + 重置事件
        handleSearchChild(data) {
            let querySearch = JSON.parse(JSON.stringify(data[0]));
            switch (data[1]) {
                case "search": // 搜索框
                    this.queryParams = querySearch;
                    this.handleQuery();
                    break;
                case "reset": // 重置按钮
                    this.queryParams = {};
                    this.queryParams.pageNum = 1;
                    this.queryParams.pageSize = 10;
                    this.getList();
                    break;
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listBoard(this.queryParams).then((response) => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                status: '0'
            };
            this.resetForm("form");
        },
        /** 按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/dts/heartbeatBillboard/export', {
                ...this.queryParams
            }, `心动告示牌_${new Date().getTime()}.xlsx`)
        }
       
    },
};
</script>

<style scoped>

</style>